<template>
  <el-dialog v-model="state.visible" draggable showcl>
    <div class="divide-title">日志下载</div>
    <el-form ref="formRef" label-width="6em" :model="formModel" :rules="formRule">
      <el-form-item label="日志类型:" prop="logType">
        <el-select v-model="formModel.logType" placeholder="请选择">
          <el-option
            v-for="dict in options.log"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="时间:" prop="timeType">
        <el-select v-model="formModel.timeType" placeholder="请选择">
          <el-option
            v-for="dict in options.time"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleAction(false)">取消</el-button>
        <el-button type="primary" @click="handleAction(true)"> 确定 </el-button>
      </el-form-item>
    </el-form>

    <div class="divide-title">历史日志</div>
    <ul class="log-list">
      <li
        style="cursor: pointer"
        @click="download(item?.logFileName, item?.url)"
        v-for="(item, i) in state.logList"
        :key="i"
      >
        {{ item?.logFileName }} -- {{ item?.createTime }}
        <svg-icon iconClass="download" class="icon" />
      </li>
    </ul>
  </el-dialog>
</template>

<script setup>
import { deviceLog, downloadDeviceLog } from '@/api/device/index'
import { formRules } from '@/utils/valid/formRules'

const props = defineProps({
  machineId: [String, Number]
})

const { proxy } = getCurrentInstance()
const options = reactive({
  time: [],
  log: []
})
const formRule = ref({
  timeType: formRules.set('请选择', 'change'),
  logType: formRules.set('请选择', 'change')
})
const loading = ref(false)
const formRef = ref()
const formModel = ref({
  machineId: '',
  timeType: '',
  logType: ''
})
const state = reactive({
  visible: false,
  logList: []
})

function handleAction(confirm) {
  if (confirm) {
    loading.value = true

    formRef.value?.validate((valid) => {
      if (valid) {
        downloadDeviceLog({ ...formModel.value, machineId: props.machineId })
          .then((r) => {
            proxy.$modal.msgSuccess(r.msg)
            state.visible = false
          })
          .finally(() => {
            loading.value = false
          })
      }
    })
  } else {
    state.visible = false
  }
}

const download = (filename, url) => {
  let a = document.createElement('a')
  a.style = 'display: none' // 创建一个隐藏的a标签
  a.download = filename
  a.href = url
  a.target = '_blank'
  document.body.appendChild(a)
  a.click() // 触发a标签的click事件
  document.body.removeChild(a)
}

async function init() {
  state.visible = true

  if (props.machineId) {
    try {
      const r = await deviceLog(props.machineId)
      state.logList = r?.rows ?? []
    } catch (error) {
      console.log(error)
    }
  }

  if (!options.time.length) {
    options.time = proxy.useDict('machine_log_time').machine_log_time
    options.log = proxy.useDict('machine_log_type').machine_log_type
  }
}

defineExpose({ init })
</script>

<style lang="scss" scoped>
.el-form {
  margin-left: 20%;
}

.log-list li {
  border-bottom: 1px solid #ccc;
  line-height: 2.5;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .icon {
    font-size: 18px;
  }
}
</style>
